<template>
  <view class="bay-area">
    <!-- 顶部banner -->
    <view class="banner">
      <image src="/static/featured/bay-area-banner.jpg" mode="aspectFill" />
      <view class="overlay"></view>
      <view class="banner-content">
        <text class="title">大湾区特色医疗</text>
        <text class="subtitle">连接粤港澳优质医疗资源</text>
      </view>
    </view>
    
    <!-- 区域选择 -->
    <scroll-view 
      scroll-x 
      class="region-bar"
      :show-scrollbar="false"
    >
      <view 
        class="region-item"
        v-for="(item, index) in regions"
        :key="index"
        :class="{ active: currentRegion === item.id }"
        @tap="selectRegion(item)"
      >
        <image :src="item.icon" mode="aspectFit" class="icon" />
        <text>{{ item.name }}</text>
      </view>
    </scroll-view>
    
    <!-- 医疗项目列表 -->
    <scroll-view 
      scroll-y 
      class="project-list"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <view 
        class="project-item"
        v-for="(item, index) in projects"
        :key="index"
        @tap="viewProject(item)"
      >
        <image :src="item.image" mode="aspectFill" class="cover-image" />
        <view class="content">
          <view class="header">
            <view class="info">
              <text class="name">{{ item.name }}</text>
              <text class="hospital">{{ item.hospital }}</text>
            </view>
            <view class="region-tag">{{ item.region }}</view>
          </view>
          <view class="desc">{{ item.desc }}</view>
          <view class="tags">
            <text v-for="(tag, idx) in item.tags" :key="idx">{{ tag }}</text>
          </view>
          <view class="footer">
            <view class="price">
              <text class="label">起价</text>
              <text class="value">¥{{ item.price }}</text>
            </view>
            <view class="stats">
              <text class="rating">{{ item.rating }}分</text>
              <text class="separator">|</text>
              <text class="cases">{{ item.cases }}例</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <uni-load-more 
        :status="loadMoreStatus"
        :content-text="{
          contentdown: '上拉加载更多',
          contentrefresh: '加载中...',
          contentnomore: '没有更多了'
        }"
      />
    </scroll-view>
    
    <!-- 底部咨询卡片 -->
    <view class="consult-card">
      <view class="info">
        <text class="title">需要帮助？</text>
        <text class="desc">专业顾问为您推荐合适的医疗方案</text>
      </view>
      <button class="consult-btn" @tap="showConsult">立即咨询</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 当前区域
const currentRegion = ref(0)

// 区域列表
const regions = ref([
  { id: 0, name: '全部', icon: '/static/region/all.png' },
  { id: 1, name: '香港', icon: '/static/region/hk.png' },
  { id: 2, name: '澳门', icon: '/static/region/mo.png' },
  { id: 3, name: '广州', icon: '/static/region/gz.png' },
  { id: 4, name: '深圳', icon: '/static/region/sz.png' }
])

// 医疗项目列表
const projects = ref([
  {
    id: 1,
    name: '肿瘤精准治疗',
    hospital: '香港养和医院',
    region: '香港',
    desc: '采用全球领先的精准医疗技术，为癌症患者提供个性化治疗方案',
    image: '/static/featured/project1.jpg',
    tags: ['精准医疗', '个性化方案', '全程陪诊'],
    price: 50000,
    rating: 4.9,
    cases: 1280
  },
  {
    id: 2,
    name: '心血管介入手术',
    hospital: '澳门镜湖医院',
    region: '澳门',
    desc: '引进国际先进的心血管介入技术，微创手术快速康复',
    image: '/static/featured/project2.jpg',
    tags: ['微创手术', '快速康复', '专家团队'],
    price: 30000,
    rating: 4.8,
    cases: 2360
  },
  {
    id: 3,
    name: '特需生育服务',
    hospital: '广州妇儿医院',
    region: '广州',
    desc: '提供高端孕产服务，配备国际化医疗团队全程守护',
    image: '/static/featured/project3.jpg',
    tags: ['高端孕产', '国际团队', '一对一服务'],
    price: 88000,
    rating: 4.9,
    cases: 3600
  }
])

// 加载状态
const refreshing = ref(false)
const loadMoreStatus = ref('more')

// 选择区域
const selectRegion = (region) => {
  currentRegion.value = region.id
  // 这里加载对应区域的项目列表
}

// 查看项目详情
const viewProject = (project) => {
  uni.navigateTo({
    url: `/pages/featured/project?id=${project.id}`
  })
}

// 显示咨询
const showConsult = () => {
  uni.showModal({
    title: '在线咨询',
    content: '专业顾问将为您提供一对一咨询服务',
    confirmText: '立即咨询',
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: '+853 2837 1333'
        })
      }
    }
  })
}

// 下拉刷新
const onRefresh = () => {
  // 这里处理刷新逻辑
  setTimeout(() => {
    refreshing.value = false
  }, 1000)
}

// 加载更多
const loadMore = () => {
  if (loadMoreStatus.value !== 'more') return
  loadMoreStatus.value = 'loading'
  
  // 这里处理加载更多逻辑
  setTimeout(() => {
    loadMoreStatus.value = 'noMore'
  }, 1000)
}
</script>

<style lang="scss">
.bay-area {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
  
  .banner {
    position: relative;
    height: 400rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
    
    .overlay {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
    }
    
    .banner-content {
      position: absolute;
      left: 40rpx;
      bottom: 40rpx;
      color: #fff;
      
      .title {
        font-size: 48rpx;
        font-weight: bold;
        margin-bottom: 12rpx;
        display: block;
        text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
      }
      
      .subtitle {
        font-size: 28rpx;
        opacity: 0.9;
        display: block;
        text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
      }
    }
  }
  
  .region-bar {
    background: #fff;
    white-space: nowrap;
    padding: 20rpx;
    
    .region-item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 30rpx;
      margin-right: 20rpx;
      
      .icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 8rpx;
      }
      
      text {
        font-size: 26rpx;
        color: $text-regular;
      }
      
      &.active {
        text {
          color: $primary-color;
          font-weight: bold;
        }
      }
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
  
  .project-list {
    height: calc(100vh - 540rpx);
    padding: 20rpx;
    
    .project-item {
      background: #fff;
      border-radius: $radius-lg;
      margin-bottom: 20rpx;
      overflow: hidden;
      
      .cover-image {
        width: 100%;
        height: 300rpx;
      }
      
      .content {
        padding: 20rpx;
        
        .header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 16rpx;
          
          .info {
            flex: 1;
            margin-right: 20rpx;
            
            .name {
              font-size: 32rpx;
              color: $text-primary;
              font-weight: bold;
              margin-bottom: 8rpx;
              display: block;
            }
            
            .hospital {
              font-size: 26rpx;
              color: $text-regular;
            }
          }
          
          .region-tag {
            font-size: 24rpx;
            color: $primary-color;
            background: $primary-light;
            padding: 4rpx 16rpx;
            border-radius: $radius-sm;
          }
        }
        
        .desc {
          font-size: 26rpx;
          color: $text-regular;
          margin-bottom: 16rpx;
        }
        
        .tags {
          margin-bottom: 20rpx;
          
          text {
            display: inline-block;
            font-size: 24rpx;
            color: $text-secondary;
            background: $bg-color;
            padding: 4rpx 16rpx;
            border-radius: $radius-sm;
            margin-right: 12rpx;
          }
        }
        
        .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 1rpx solid $border-color;
          padding-top: 20rpx;
          
          .price {
            .label {
              font-size: 24rpx;
              color: $text-secondary;
              margin-right: 8rpx;
            }
            
            .value {
              font-size: 36rpx;
              color: $warning;
              font-weight: bold;
            }
          }
          
          .stats {
            font-size: 24rpx;
            color: $text-secondary;
            
            .rating {
              color: $success;
            }
            
            .separator {
              margin: 0 12rpx;
              color: $border-color;
            }
          }
        }
      }
      
      &:active {
        transform: scale(0.99);
      }
    }
  }
  
  .consult-card {
    position: fixed;
    left: 30rpx;
    right: 30rpx;
    bottom: 40rpx;
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: $shadow-lg;
    
    .info {
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .desc {
        font-size: 26rpx;
        color: $text-regular;
      }
    }
    
    .consult-btn {
      width: 200rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #fff;
      background: $primary-gradient;
      border-radius: $radius-xl;
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 